<template>
  <div class="demo01">
    <div>
      <p>{{ msg }}</p>
      <form>
        <el-input type="text" v-model="stu.name" placeholder="姓名" />
        <el-input type="text" v-model="stu.age" placeholder="年纪" />
        <el-input type="submit" @click="addStu" />
      </form>
      <div>
        <ul>
          <li
            v-for="(stu, index) in stus"
            :key="index"
            @click="removeStu(index)"
          >
            {{ stu.name }} -- {{ stu.age }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "demo01",
  data: function () {
    return {
      msg: "同学们好，这里是vue2.0回顾课!",
      stus: [
        { name: "zs", age: 10 },
        { name: "ls", age: 20 },
        { name: "ww", age: 30 },
      ],
      stu: {
        name: "",
        age: "",
      },
    };
  },
  methods: {
    removeStu(index) {
      this.stus = this.stus.filter((stu, idx) => idx !== index);
    },
    addStu(e) {
      e.preventDefault();
      const stu = Object.assign({}, this.stu);
      this.stus.push(stu);
      this.stu.id = "";
      this.stu.name = "";
      this.stu.age = "";
    },
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  },
  computed: {
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  },
  watch: {
    // 新增功能1的业务逻辑
    // 新增功能2的业务逻辑
  },
};
</script>

<style lang="scss" >
.demo01 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  p {
    text-align: center;
    margin-bottom: 20px;
  }
  .el-input {
    margin: 10px;
  }
}
</style>
